﻿<template>
  <div id = "editor" v-loading = 'loading' element-loading-text = '数据请求中...'>
    <!-- 上部的工具栏 -->
    <toolbar @change-eage= "changeEage" @submit = "submitData" @save = "getSaveData" @addPlus = "addPlus" @delCurrent = "delCurrent"
    :currentVersionStatus = "currentVersionStatus" :hadUnpublishedVersion = "hadUnpublishedVersion"/>
    <!-- 右侧的流程名称 -->
    <span class = "currentName">{{currentName}}</span>
    <div class = "bottom-container">
      <!-- 点击右键显示的操作菜单 -->
      <context-menu />
      <!-- 左边节点的选择去 -->
      <div id = "itempannel">
        <ul>
          <li class = "getItem" data-shape = "start_item" data-type = "node" data-nodetype = '1' data-attributes = '' data-action = '' data-userrules = ''
          data-label = '开始' title = '开始节点'>
            <i class = 'iconfont icon-ai23'></i>
          </li>
          <li class = "getItem" data-shape = "audit_item" data-type = "node" data-nodetype = '2' data-attributes = '' data-action = '' data-userrules = ''
          data-size = "160*36" data-label = '中间节点' title = '中间节点'>
            <i class='iconfont icon-shenhe'></i>
          </li>
          <li class = "getItem" data-shape = "end_item" data-type = "node" data-nodetype = '3' data-attributes = '' data-action = '' data-userrules = ''
          title = '结束节点' data-label = '结束'>
            <i class='iconfont icon-weibiaoti517'></i>
          </li>
        </ul>
      </div>
      <!-- 右边的节点、边的设置区域 -->
      <div id = "detailpannel">
        <el-collapse accordion class = 'myCollapse'>
          <el-collapse-item title = '节点/边详情'>
            <!-- edge-selected:边属性栏node-selected节点属性栏canvas-selected画布属性栏 -->
            <div data-status = "node-selected" class = "pannel" >
              <div class = "block-container main_dialog">
                <el-form label-width = "42px">
                  <el-form-item label = "ID：">
                    <el-input v-model = "NodeID" disabled/>
                  </el-form-item>
                  <el-form-item label = "名称：">
                    <el-input v-model = "Title" />
                  </el-form-item>
                  <el-form-item label = "类型：">
                    <el-select v-model = 'Type'>
                      <el-option label = '开始节点' value = '1'></el-option>
                      <el-option label = '普通节点' value = '2'></el-option>
                      <el-option label = '结束节点' value = '3'></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label = "长度：" v-if = "currentNode.shape === 'audit_item'">
                    <el-input v-model = "tempInputingSize_width" />
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <!-- 选择的是边时 -->
            <div data-status = "edge-selected" class = "pannel" >
              <div class = "block-container">
                <el-form label-width = "80px">
                  <el-form-item label = "ID：">
                    <el-input v-model = "NodeID" disabled/>
                  </el-form-item>
                  <el-form-item label = "行为：" >
                    <el-select v-model = "ActionCode" size = "medium">
                      <el-option v-for = "(item,index) in firstNodes" :key = "index" :label = "item.title" :value = "item.code"></el-option>
                  </el-select>
                  </el-form-item>
                  <el-form-item label = "扩展属性： " >
                    <el-input v-model = "ExtendData" />
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-collapse-item>
          <div data-status = "edge-selected" class = "pannel" >
            <el-collapse accordion class = 'myCollapse'>
              <el-collapse-item>
                <template slot = 'title'>
                  添加事件 <i class = 'iconfont icon-add' @click.stop = "addData('AddEvents')" title = '添加'></i>
                </template>
                <el-table :data = "events_tableData" style = "width:100%" empty-text = "暂无数据" border stripe class = 'editTable'>
                  <el-table-column align = "center" label = "类别">
                    <template slot-scope = "scope">
                      <el-select v-model = 'scope.row.eventtype'>
                        <el-option label = '执行前' value = '1'></el-option>
                        <el-option label = '执行后' value = '2'></el-option>
                        <el-option label = '获取用户' value = '3'></el-option>
                        <el-option label = '创建任务' value = '4'></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "名称">
                    <template slot-scope = "scope">
                      <el-select v-model = 'scope.row.eventname' @change = "(val)=>{watchEvent(val,scope.row)}">
                        <el-option v-for = "(item,index) in EventNamelist" :key = "index" :label = "item.name" :value = "item.no"></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "操作" width = '40px'>
                    <template slot-scope = "scope">
                      <el-button type = 'text' @click = "deleteData('AddEvents', scope.$index)" title = '删除'><i class = 'iconfont icon-shanchu'></i></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </div>
          <el-collapse-item v-if = "currentNode.type === 'node'">
            <template slot = 'title'>
              动态属性 <i class = 'iconfont icon-add' @click.stop = "addData('attr')" title = '添加'></i>
            </template>
            <el-table :data = "attr_tableData" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" label = "属性名称">
                <template slot-scope = "scope">
                  <el-input v-model = "scope.row.name" placeholder = "请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" label = "属性值">
                <template slot-scope = "scope">
                  <el-input v-model = "scope.row.value" placeholder = "请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" label = "操作" width = '40px'>
                <template slot-scope = "scope">
                  <el-button type = 'text' @click = "deleteData('attr', scope.$index)" title = '删除'><i class = 'iconfont icon-shanchu'></i></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item v-show = "currentNode.type === 'node'">
            <template slot = 'title'>
              节点行为 <i class = 'iconfont icon-add' @click.stop = "addData('action')" title = '添加'></i>
            </template>
            <el-table :data = "action_tableData" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" label="名称">
                <template slot-scope = "scope">
                  <el-select v-model = 'scope.row.code' @change = "(val)=>{writeTitle(val,scope.row)}">
                    <el-option label = '保存' value = 'Save'></el-option>
                    <el-option label = '删除' value = 'Delete'></el-option>
                    <el-option label = '提交' value = 'Submit'></el-option>
                    <el-option label = '通过' value = 'Pass'></el-option>
                    <el-option label = '驳回' value = 'Reject'></el-option>
                    <el-option label = '选择驳回' value = 'SelectReject'></el-option>
                    <el-option label = '终止' value = 'Stop'></el-option>
                    <el-option label = '申请' value = 'Apply'></el-option>
                    <el-option label = '提交挂起' value = 'SubmitPending'></el-option>
                    <el-option label = '恢复挂起' value = 'ActivePending'></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" label = "行为类型">
                <template slot-scope = "scope">
                  <el-select v-model = 'scope.row.type'>
                    <el-option label = '执行流程' value = '1'></el-option>
                    <el-option label = '终止流程' value = '2'></el-option>
                    <el-option label = '无关流程' value = '0'></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" label = "操作" width = '40px'>
                <template slot-scope = "scope">
                  <el-button type = 'text' @click = "deleteData('action', scope.$index)" title = '删除'><i class = 'iconfont icon-shanchu'></i></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item v-show = "currentNode.type === 'node'">
            <template slot = 'title'>
              用户规则 <i class = 'iconfont icon-add' @click.stop = "addData('user')" title = '添加'></i>
            </template>
            <el-table :data = "user_tableData" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" label = "部门编码">
                <template slot-scope = "scope">
                  <el-input v-model = "scope.row.depcode" placeholder = "请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" label = "角色编码">
                <template slot-scope = "scope">
                  <el-input v-model = "scope.row.titlecode" placeholder = "请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" label = "行为类型">
                <template slot-scope = "scope">
                  <el-select v-model = 'scope.row.type'>
                    <el-option label = '交集' value='1'></el-option>
                    <el-option label = '并集' value='2'></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" label = "操作" width = '40px'>
                <template slot-scope = "scope">
                  <el-button type='text' @click = "deleteData('user', scope.$index)" title='删除'><i class = 'iconfont icon-shanchu'></i></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
          <div class = "historydata">
            <hr>
            <el-select v-model = "selectWFID" :placeholder = "selectWFID ? '请选择版本信息' : '暂无版本信息,请添加'" size = "medium" :disabled = "!selectWFID" style = "width:300px">
              <el-option v-for = "item in currentWorkflowVersionList" :key = "item.Master.WFID" :value = "item.Master.WFID"
              :label="'版本号 ' + item.Master.Version + '                                       ' + (item.Master.Status === 1 ? '已发布' : '未发布')"></el-option>
            </el-select>
          </div>
        </el-collapse>
      </div>
      <!-- 流程展示区域 -->
      <div id = "page"></div>
    </div>
  </div>
</template>

<script src='./workflowDefine.js'></script>
